<template>
  <div v-if="readOnly">
    {{ $setTime(stayValue, 2) }}
  </div>
  <a-range-picker
    v-else
    format="YYYY-MM-DD HH:mm:ss"
    :show-time="showTime"
    v-model:value="stayValue"
    :disabled="disabled"
    style="width: 100%"
    @change="onChange"
  />
</template>

<script lang="ts" setup>
import { toRefs, ref, defineEmits, defineProps, watch } from "vue";
const emits = defineEmits(["update:value"]);
const props = defineProps({
  value: {
    required: true,
    default: [],
  },
  readOnly: {
    default: false,
  },
  disabled: {
    default: false,
  },
  showTime: {
    default: false,
  },
});
const { value, readOnly, disabled, showTime } = toRefs(props);
const stayValue = ref([]);

watch(value, (date) => {
  if (date.length != 2) {
    emits("update:value", "");
    stayValue.value = [];
  }
});

function onChange(date, dateString) {
  emits("update:value", dateString);
}
</script>

<style></style>
